<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>${product.name} - Powered By ${systemConfig.systemName}</title>
<meta name="Author" content="webmall Team" />
<meta name="Copyright" content="webmall" />
<#if (product.metaKeywords)! != ""><meta name="keywords" content="${product.metaKeywords}" /></#if>
<#if (product.metaDescription)! != ""><meta name="description" content="${product.metaDescription}" /></#if>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<#include "/WEB-INF/template/common/include.ftl">
<link href="${base}/template/shop/css/login.css" rel="stylesheet" type="text/css" />
<link href="${base}/template/shop/css/register.css" rel="stylesheet" type="text/css" />
<link href="${base}/template/shop/css/product.css" rel="stylesheet" type="text/css" />
<link href="${base}/template/shop/css/product_content.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${base}/template/shop/js/login.js"></script>
<script type="text/javascript" src="${base}/template/shop/js/register.js"></script>
<script type="text/javascript" src="${base}/template/shop/js/product.js"></script>
<link href="${base}/template/common/paper/paper.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${base}/template/common/paper/paper.js"></script>
<script type="text/javascript">
var colorSize2Item = new Array();

$().ready( function() {
	// 添加商品浏览记录
	// Tab效果
	$('.tab_parent').each(function(i){

		$("#"+this.id +" ul.tab_head").tabs("#"+this.id +" .tabContent", {
			effect: "fade",// 逐渐显示动画
			fadeInSpeed: 500,// 动画显示速度
			event: "click"// 触发tab切换的事件
		});
		
		$('.corner').corner("round 4px");
		
	 });
	 
	 $(".minus").click(function(){	
		var rId = this.getAttribute("rId");	
		var obj = $("#"+rId);
		if(parseInt(obj.val())>1)
			obj.val(parseInt(obj.val())-1);
		obj.trigger("onchange");
	})
	$(".plus").click(function(){
		var rId = this.getAttribute("rId");	
		var obj = $("#"+rId);
		obj.val(parseInt(obj.val())+1);
		obj.trigger("onchange");
	});
	
	$("#addConsultForm").validate({
		invalidHandler: function(form, validator) {
			$.each(validator.invalid, function(key, value){
				$.tip(value);
				return false;
			});
		},
		errorPlacement:function(error, element) {},
		submitHandler: function(form) {
			if ($.cookie("loginMemberUsername") == null) {
				$.flushHeaderInfo();
				$.loginWindowShow();
				return false; 
			} else {
				$("#addConsultForm").attr("disabled", true);
				$("#addConsultForm").ajaxSubmit({
					dataType: "json",
					success: function(data) {
						if (data.status == "success") {
							$.tip(data.status, data.message);
							$("#keyword").val("");
							$("#productConsultContent").val("");
						} else {
							$("#loginWindowCaptcha").val("");
							$.tip(data.status, data.message);
						}
						$("#addConsultForm").attr("disabled", false);
						loadingConsult();
					}
				});
			}
		}
	});
	
	$("#searchConsultForm").validate({
		invalidHandler: function(form, validator) {
			$.each(validator.invalid, function(key, value){
				$.tip(value);
				return false;
			});
		},
		errorPlacement:function(error, element) {},
		submitHandler: function(form) {
		loadingConsult();
		}
	});
	
	$(".consult .categoryNum ul li").click( function(event) {
		$(".consult .categoryNum ul li ").each(function() {
			$this = $(this);
			$(this).removeClass("all_comment");
		})
		$(this).addClass("all_comment"); 
		var $this = $(this);
		$('#'+$(this).metadata().elementId).val($(this).metadata().value);
		
		$('#searchConsultForm').submit();
	});
	
	
	$(".summery .categoryNum ul li").click( function(event) {
		$(".summery .categoryNum ul li ").each(function() {
			$this = $(this);
			$(this).removeClass("all_comment");
		})
		$(this).addClass("all_comment"); 
		
		var $this = $(this);
		$('#'+$(this).metadata().elementId).val($(this).metadata().value);
		loadingComment();
	});
	loadingComment();
	loadingConsult();
	
})


function loadingConsult(page)
{
	if(page==undefined||page==null || isNaN(page) || page < 1)
	{
		page=1;
	}
	$('#ajaxProductConsult').html("loading...");
	$.ajax({
		url: "${base}/shop/member!ajaxConsult.action?id=${product.id}&pager.pageNumber="+page,
		dataType: "text",
		data: "pager.keyword="+$('#keyword').val()+"&consultType="+$('#consultType').val(),
		async: true,
		success: function(data) {
		var result = data.split('#$#');
			$('#ajaxProductConsult').html(result[0]);
			page_cousult = new showPages('page_cousult','','loadingConsult',page,'');
			page_cousult.pageCount =result[1];
			page_cousult.printHtml("pageBar_cousult",6);
		}
	});
}

function loadingComment(page)
{
	if(page==undefined||page==null || isNaN(page) || page < 1)
	{
		page=1;
	}
$('#ajaxProductComment').html("loading...");
	$.ajax({
		url: "${base}/shop/member!ajaxComment.action?id=${product.id}&pager.pageNumber="+page,
		dataType: "text",
		data: "rank="+$('#commentRank').val(),
		async: true,
		success: function(data) {
		var result = data.split('#$#');
			$('#ajaxProductComment').html(result[0]);
			
			page_comment = new showPages('page_comment','','loadingComment',page,'');
			page_comment.pageCount =result[1];
			page_comment.printHtml("pageBar_comment",6);
		}
	});
}


</script>
</head>
<body class="productContent">
	<div id="addCartItemTip" class="addCartItemTip">
		<div class="top">
			<div class="tipClose addCartItemTipClose"></div>
		</div>
		<div class="middle">
			<p>
				<span id="addCartItemTipMessageIcon">&nbsp;</span>
				<span id="addCartItemTipMessage"></span>
			</p>
			<p id="addCartItemTipInfo" class="red"></p>
			<input type="button" class="formButton tipClose" value="继续购物" hidefocus="true" />
			<input type="button" class="formButton" onclick="location.href='${base}/shop/cart_item!list.action'" value="进入购物车" hidefocus="true" />
		</div>
		<div class="bottom"></div>
	</div>
	<#include "/WEB-INF/template/shop/header.ftl">
	
	
	<div class="blank"></div>
	
	<div class="listBar corner">
		<div class="path">
			<a href="${base}/" class="home"><span class="icon">&nbsp;</span>首页</a>>
			<#list pathList as list>
				<a href="${base}${list.htmlFilePath}">${list.name}</a>>
			</#list>
		</div>
	</div>
	<div class="blank"></div>
	
	<div class="body">
		<div class="bodyLeft">
			<div class="productCategory">
				<div class="top" style="background-color:rgb(205,237,252);">
					<#if (product.productCategory.parent)!=null>
						${product.productCategory.parent.name}
					</#if>
				</div>
            	<div class="middle clearfix">
	            	<ul>
	            	<#list (product.productCategory.parent.children)! as list>
	            		<li><a href="${base}/shop/product!list.action?id=${list.id}">${list.name}</a></li>
	            	</#list>
	            	</ul>
            	</div>
			</div>
			<div class="blank"></div>
			<div class="productCategory">
				<div class="top" style="background-color:rgb(205,237,252);">
					同类品牌
				</div>
            	<div class="middle clearfix">
	            	<ul>
	            	<#list product.productCategory.brandList?if_exists as brand>
		          		 <li>
		          		 <nobr><a href="${base}/shop/product!brand.action?brandName=${brand.id}" title="${brand.name}" target=_blank>${brand.name}</a>
		          		 </nobr>
		          		 </li>
		          	</#list>
	            	</ul>
            	</div>
			</div>
			<div class="blank"></div>
			
			<div class="hotProduct">
				<div class="top">热销排行</div>
				<div class="middle clearfix">
					<ul>
						<#list (hotProductList)! as list>
							<li class="number${list_index + 1}">
								<#if (list.name?length < 15)>
									<span class="icon">&nbsp;</span><a href="${base}${list.htmlFilePath}" title="${list.name}">${list.name}</a>
								<#else>
									<span class="icon">&nbsp;</span><a href="${base}${list.htmlFilePath}" title="${list.name}">${list.name[0..12]}...</a>
								</#if>
							</li>
							<#if list_index + 1 == 10>
								<#break />
							</#if>
						</#list>
					</ul>
				</div>
				<div class="bottom"></div>
			</div>
			<div class="blank"></div>
			<div class="productHistory">
				<div class="top">浏览记录</div>
				<div class="middle clearfix">
					<ul id="productHistoryListDetail"></ul>
				</div>
				<div class="bottom"></div>
			</div>
		</div>
		<div class="bodyRight">
			<div class="productTop">
				<div class="top" style="height:40px;padding-left:8px;">
					<h1>
						<#if (product.name?length > 50)>${product.name[0..46]}...<#else>${product.name}</#if>
					</h1>
				</div>
				<div class="blank"></div>
				<div class="productTopLeft">
					<div class="productImage">
	                	<#list product.productImageList as list>
	                		<#if (list_index==1)>
								<#break />
							</#if>
							<img  class="jqzoom" src="${base}${list.smallProductImagePath}" rel="${base}${list.bigProductImagePath}">
						</#list>
						<#if product.productImageList == null>
							<img  class="jqzoom" src="${base}${systemConfig.defaultSmallProductImagePath}" rel="${base}${systemConfig.defaultBigProductImagePath}"></a>
	                	</#if>
                	</div>
					<div class="thumbnailProductImage">
						<a class="prev browse" href="javascript:void(0);" hidefocus="true"></a>
						<div class="scrollable">
							<ul class="items productImageTab">
								<#if (product.productImageList == null)!>
									<li>
										<span class="jqzoom_item">
										<img src="${base}${systemConfig.defaultThumbnailProductImagePath}"  mid="${base}${systemConfig.defaultSmallProductImagePath}" big="${base}${systemConfig.defaultBigProductImagePath}" />
										</span>
									</li>
	                        	</#if>
	                        	<#list (product.productImageList)! as list>
									<li>
										<span class="jqzoom_item">
										<img src="${base}${list.thumbnailProductImagePath}"  mid="${base}${list.smallProductImagePath}" big="${base}${list.bigProductImagePath}" />
										</span>
									</li>
								</#list>
							</ul>
						</div>
						<a class="next browse" href="javascript:void(0);" hidefocus="true"></a>
					</div>
				</div>
				<div class="productTopRight">
					<div class="productInfo">
						<div style="height:30px;">
							<span class="lable marketPrice">价 格：</span><span class="marketPrice">${product.marketPrice?string(priceCurrencyFormat)}</span>
						</div>
						
						<div style="height:30px;">
							<span class="lable">促 销：</span><span class="price">${product.price?string(priceCurrencyFormat)}</span>
						</div>
						
						<#if (product.weight > 0)>
							<div style="height:30px;">
									<span class="lable">重 量：</span><span class="weight">${product.weight} ${bundle("WeightUnit." + product.weightUnit)}</span>
							</div>
						</#if>
						<#if (product.point != 0)>
							<div style="height:30px;">
								<span class="lable">送 积 分：</span><span>${product.point}</span>
							</div>
						</#if>
						<div style="height:30px;">
                        	${("<span class='lable'>品 牌：</span><span>" + product.brand.name + "</span>")!}
						</div>
							
					</div>
					<div class="blank"></div>
					<div class="productBuy">
						<#list (product.productitemSet)! as list>
							<input type="hidden" id="itemId" value="${list.id}" />
							<#if list_index + 1 == 1>
								<#break />
							</#if>
						</#list>
						<#list (product.productPropertiesList)! as list>
							<#if list.isRequired>
								<div class="properties">
									<div class="lable">${list.lable}：</div>
									<div class="dync">
										<ul>
											<input type="hidden" name="dyncProperties" value="" />
											<#list (list.properties.propertiesValueList)! as properties>
												<li class="{value:${properties.value}}">
													<nobr>
														<span>${properties.lable}</span>
														<i>&nbsp;&nbsp;</i>
													</nobr>
												</li>
											</#list>
										</ul>
											
									</div>
								</div>
							<#else>
								<#list (list.properties.propertiesValueList)! as properties>
									<#if list.value==properties.value>
										<div style="height:30px;">
											<span class="lable">${list.lable}：</span><span>${properties.lable}</span>
										</div>
									</#if>
								</#list>
							</#if>
						</#list>
						
						<#if ((product.productColorList)!size > 0) >	
						<div class="properties">
							<div class="lable">颜色：</div>
							<div class="color">	
								<ul>
									<input type="hidden" id="p_color" name="dyncProperties" value="" />
									<#list (product.productColorList)! as list>
										<li class="{value:'${list.id}',size:[<#list (color_size.get(''+list.id))! as listsize>'${listsize}'<#if listsize_has_next>,</#if></#list>]}">
											<nobr>
											<span class="jqzoom_item">
												<img src="${base}${list.imgUrl}"  mid="${base}${list.imgUrl}" big="${base}${list.imgUrl}" />
											</span>
											<i>&nbsp;&nbsp;</i>
											</nobr>
										</li>
									</#list>
								</ul>
							</div>
						</div>
						</#if>
						<#if ((sizeList)!size > 0)>	
						<div class="properties">
							<div class="lable">大小：</div>
							<div class="size">	
								<ul>
									<input type="hidden" id="p_size" name="dyncProperties" value="" />
									<#list (sizeList)! as list>
										<li class="{value:'${list.id}',color:[<#list (size_color.get(''+list.id))! as listsize>'${listsize}'<#if listsize_has_next>,</#if></#list>]}">
											<nobr>
												<span>${list.lable}</span>
												<i>&nbsp;&nbsp;</i>
											</nobr>
										</li>
									</#list>
								</ul>
							</div>
						</div>
						</#if>
						
						<script>
							<#list (color_size_item?keys)! as list>
								colorSize2Item['${list}']='${color_size_item.get(list)}';
							</#list>
						</script>
						
						
						
						<div class="buyCount">
							我要买:<input class="minus" rId="quantity" type="button" value="-" />
								<input type="text" class="plusNum" id="quantity" value="1" />
								<input class="plus" rId="quantity" type="button" value="+" />
						</div>
						
						<div class="operationArea">
						<input type="button" class="buynowButton btn_yellow buynow {id: '${product.id}',type:'p'}" value="立刻购买" hidefocus="true" />
						<#if product.isOutOfStock>
							<input type="button" class="outOfStockButton" value="" hidefocus="true" />
						<#else>
							<input type="button" class="addCartItemButton addCartItem {id: '${product.id}',type:'p'}" value="加入购物车" hidefocus="true" />
						</#if>
                        <input type="button" class="addFavoriteButton addFavorite {id: '${product.id}',type:'p'}" value="" hidefocus="true" />
                        </div>
					</div>
				</div>
			</div>
			<div class="blank"></div>
			<div class="tab_parent" id="tab_productionDetail">
				<div class="tabHead">
					<ul class="tab_head">
						<li>
							<a href="javascript:void(0);" class="current" hidefocus="true">商品介绍</a>
						</li>
						<li>
							<a href="javascript:void(0);" name="productAttribute" hidefocus="true">规格参数</a>
						</li>
						<li>
							<a href="javascript:void(0);" name="productAttribute" hidefocus="true">包装清单</a>
						</li>
						<li>
							<a href="javascript:void(0);" name="productAttribute" hidefocus="true">售后服务</a>
						</li>
						<li>
							<a href="javascript:void(0);" name="productAttribute" hidefocus="true">商品评论</a>
						</li>
						<li>
							<a href="javascript:void(0);loadingConsult();" name="productAttribute" hidefocus="true">购买咨询</a>
						</li>
					</ul>
				</div>
				<div class="tabContent">
					${product.description}
				</div>
				<div class="tabContent">
					${product.attributes}
				</div>
				<div class="tabContent">
					${product.packList}
				</div>
				<div class="tabContent">
					${product.afterService}
				</div>
				<div class="tabContent">
							<div class="summery">
								<div class="chartPercent">
										<input type="hidden" name="id" value="${product.id}" />
										<input type="hidden" id="commentRank" name="rank" value="" />
									<div class="left">
										<p>
										<span class="number">${productComment.getGoodDegree()}%</span>
										</p>
										<p>
										<span class="lable_number">
											好评度
										</span>
										</p>
									</div>
									<div class="right">
										<ul>
											<li><span>好评&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="progressBar" id="good_comment">0%</span></li>
											<li><span>中评&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="progressBar" id="normal_comment">0%</span></li>
											<li><span>差评&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="progressBar" id="bad_comment">0%</span></li>
										</ul>
									</div>
								</div>
								<div class="categoryNum">
									<ul>
										<li class="all_comment {elementId:'commentRank',value:'0~'}">全部评论</li>
										<li class="{elementId:'commentRank',value:'5~'}" >好评</li>
										<li class="{elementId:'commentRank',value:'3~4'}">中评</li>
										<li class="{elementId:'commentRank',value:'0~2'}">差评</li>
									</ul>
								</div>								
							</div>
							<script type="text/javascript">
								$().ready( function() {
									$("#good_comment").progressBar(${productComment.getGoodDegree()},{ barImage: '${base}/template/common/images/progressbg_yellow.gif'} );
									$("#normal_comment").progressBar(${productComment.getMidDegree()},{ barImage: '${base}/template/common/images/progressbg_yellow.gif'} );
									$("#bad_comment").progressBar(${productComment.getBadDegree()},{ barImage: '${base}/template/common/images/progressbg_yellow.gif'} );
								})
							</script>
							
							<div id="ajaxProductComment">
								<#list (product.productCommentSet)! as list>
									<div class="productComment">
										<div class="left">
											<img src="${base}${list.member.headIcon}" />
											<p>${list.member.username}</p>
											<p>${list.member.memberRank.name}</p>
											<p>购买日期：${list.createDate}</p>
										</div>
										<div class="right">
											<div class="title">${list.title}<span class="createTime">${list.createDate}</span></div>
											<ul>
											<li>
											<span class="lable">优点：</span>${list.advantage}
											</li>
											<li>
											<span class="lable">不足：</span>${list.shortcoming}
											</li>
											<li>
											<span class="lable">使用心得：</span>${list.experience}
											</li>
											</ul>
										</div>
									</div>
									<div class="blank"></div>
								</#list>
							</div>
							<div id="pageBar_comment" class="pager">
							</div>
				</div>
				<div class="tabContent">
					<div class="consult">
						<div class="top">
						<div class="search_consult">
							<form id="searchConsultForm" action="${base}/shop/member!ajaxConsult.action" method="post">
								<input type="hidden" name="id" value="${product.id}" />
								<input type="hidden" id="consultType" name="consultType" value="" />
								<input type="text" id="keyword" name="pager.keyword" value="" />
								<input type="submit" class="btn_white" id="btn_submit" value="搜索" />
							</form>
						</div>
						<div class="submit_consult" style="display:block;">
							<form id="addConsultForm" action="${base}/shop/member!addConsult.action" method="post">
							<input type="hidden" name="id" value="${product.id}" />
							<div class="item" style="height:65px;display:block;">
								<select name="consult.type" class="formText {required: true, messages: {required: '请选择类型!'}}">
									<option value="1">
										商品咨询
									</option>
									<option value="2">
										库存及配送
									</option>
									<option value="3">
										支付问题
									</option>
									<option value="4">
										发票及保修
									</option>
									<option value="5">
										促销及赠品
									</option>
								</select>
								<textarea type="text" id="productConsultContent" name="consult.content" class="formText {required: true, messages: {required: '请填写内容!'}}"  ></textarea>						
								<input type="submit" class="btn_blue" id="btn_submit" value="发表咨询" />
							</div>
							</form>
						</div>
						</div>
						<div class="categoryNum">
							<ul>
								<li class="all_comment {elementId:'consultType',value:''}">全部咨询</li>
								<li class="{elementId:'consultType',value:'1'}" onclick="return false;">商品咨询</li>
								<li class="{elementId:'consultType',value:'2'}" onclick="return false;">库存及配送</li>
								<li class="{elementId:'consultType',value:'3'}" onclick="return false;">支付问题</li>
								<li class="{elementId:'consultType',value:'4'}" onclick="return false;">发票及保修</li>
								<li class="{elementId:'consultType',value:'5'}" onclick="return false;">促销及赠品</li>
							</ul>
						</div>	
						<div id="ajaxProductConsult">
						</div>
						<div id="pageBar_cousult" class="pager">
						</div>
				</div>
			</div>
		</div>
		<div class="blank"></div>
		<#include "/WEB-INF/template/shop/friend_link.ftl">
	</div>
	</div>
	<div class="blank"></div>
	<#include "/WEB-INF/template/shop/footer.ftl">
</body>
</html>